<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .dialog {
        width: 400px;
        height: auto;
        min-height: 90px;
        border: 1px solid gray;
        box-shadow: 5px 5px 5px grey;
        visibility: hidden;
        margin: auto;
        background: white;
        padding: 10px;
        display: block;
        left:200px;
        top:200px;
    }

    .button {
        background-color: #4CAF50;
        /* Green */
        border: none;
        color: white;
        padding: 5px 20px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
    }

    table {
        border: 1px solid red;
        width: 400px;
        height: auto;
    }

    td {
        background-image: linear-gradient(to right, red, yellow);
        background-color: red;
    }

    .shape {
        padding: 0px;
        margin: 0px;
        width: 100%;
        opacity: 0.5;
        background-color: gray;
        position: fixed;
        top:0px;
        z-index: inherit;
        height: 100%;
        overflow: auto;
    }
</style>

<script>
    let kjxtable = {
        getSpringBoot: {
            code: 200, msg: 'success', data: [
                { sno: 1, sname: "admin", sage: 13 },
                { sno: 2, sname: "admin1", sage: 13 },
                { sno: 3, sname: "admin2", sage: 13 },
                { sno: 4, sname: "admin3", sage: 13 },
                { sno: 5, sname: "admin4", sage: 13 },
            ]
        },
        load: (id) => {
            kjxtable.deleteAll(id);
            kjxtable.list(id);
        },
        list: (id) => {
            //选择器  id
            let t = document.getElementById(id);
            //是不是应该 新增加一个tr
            //使用html里原带方法 （js调用）

            if (kjxtable.getSpringBoot.code === 200) {
                const data = kjxtable.getSpringBoot.data;
                for (let i = 0; i < data.length; i++) {

                    let tr = t.insertRow();

                    let td = tr.insertCell();
                    td.innerText = data[i].sno;

                    td = tr.insertCell();
                    td.innerText = data[i].sname;

                    td = tr.insertCell();
                    td.innerText = data[i].sage;
                }
            }
        },
        deleteAll: (id) => {
            //选择器  id
            let t = document.getElementById(id);

            let rlen = t.rows.length;

            for (let i = rlen - 1; i > 0; i--) {
                t.deleteRow(i);
            }

        },
        popDialog: (id) => {

            let t = document.getElementById(id);
            t.style.visibility = "visible";
            t.style.display = "block";
            t.style.opacity = 2;
               //使用js生成html里面的div
            let divShape = document.createElement("div");
            divShape.className = "shape";
            document.body.appendChild(divShape);
            divShape.appendChild(t);
          
           
        },
        saveData: (id,add) => {
            let t = document.getElementById(id);

            //向getSpringBoot  添加一行新的
            let newData = {
                sno: document.getElementById("sno").value,
                sname: document.getElementById("sname").value,
                sage: document.getElementById("sage").value
            };
            kjxtable.getSpringBoot.data.push(newData);



            //把原来的内容 清空
            document.getElementById("sno").value = "";
            document.getElementById("sname").value = "";
            document.getElementById("sage").value = "";
            //popDialog 隐藏
            let shape = document.querySelector(".shape");
            document.getElementById(add).style.visibility = "hidden";
            shape.style.visibility = "hidden";
            console.log(shape);
            //重载表格
            kjxtable.load(id);
        },
        /**
         *  options
         *  {
         *   id :'tab',
         * cols:[
         *  {key:sno,title:'序号',width:200px}
         * {key:sname,title:'序号',width:200px}
         * {key:sage,title:'序号',width:200px}
         * ]
         * }
         */
        initTable: (options) => {

        }

    }

    //js在上，html在下，所以先加载了js 后加载的html ，js执行的时候没有html
    window.onload = () => {
        //当窗体加载完成以后
        kjxtable.load('tab');
    }

</script>

<style>
    body {
        padding: 0px;
        margin: 0px;
    }
</style>

<body>

    <button class="button" onclick="kjxtable.deleteAll('tab')">清空表格</button>
    <button class="button" onclick="kjxtable.load('tab')">重载表格</button>
    <button class="button" onclick="kjxtable.popDialog('add')">添加</button>
    <table id="tab">
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </table>

    <div id="add" class="dialog">

        <div>
            <label for="">序号</label>
            <input type="text" id="sno">
        </div>
        <div>
            <label for="">姓名</label>
            <input type="text" id="sname">
        </div>
        <div>
            <label for="">年龄</label>
            <input type="text" id="sage">
        </div>
        <button class="button" onclick="kjxtable.saveData('tab','add');return false;">保存</button>
    </div>

    <!-- 遮罩层 -->
</body>

</html>